<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">营销物资分析</x-header>
    <div class="content">
      <div class="pad">
        <Chart width="100%" height="420px" :option="optionBar" loading></Chart>
      </div>
      <div class="h4">当月商城直发营销物资</div>
      <ul>
        <li v-for="(x,i) of shopByMonth" :key="i"  class="ub pad my-item" @click="handleItem(x)">
            <div class="title uf-1">{{x.name}}</div>
            <div class="value">￥{{x.value|money}}</div>
            <div class="ub uc t-gray">
                <i class="fa fa-chevron-right"></i>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
import Chart from "@/components/Chart";
export default {
  data() {
    return {
      optionBar: {},
      shopByMonth: []
    };
  },
  mounted() {
    this.$store.dispatch("marketing_index_year").then(resp => {
      var barData = _.map(resp.data, item => {
        item.name = item.name.substring(0, 2);
        item.value = item.value / 10000;
        return item;
      });

      this.optionBar = {
        title: {
          text: "当年商城直发营销物资(万)"
        },
        tooltip: {},
        legend: {},
        xAxis: {
          type: "value"
        },
        yAxis: {
          data: _.pluck(barData, "name")
        },
        series: [
          {
            name: "营销",
            type: "bar",
            data: barData
          }
        ]
      };
    });

    this.$store.dispatch("marketing_index_month").then(resp => {
      this.shopByMonth = resp.data;
    });
  },
  methods: {
    handleItem(x) {
      this.$router.push({
        name: "MarketDetail",
        params: { comp_id: x.code }
      });
    }
  },
  components: {
    XHeader,
    Chart
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.content {
  padding-top: 60px;
  li {
    .title {
      padding-left: 20px;
    }
    i {
      margin-left: 10px;
    }
  }
  .h4 {
    padding: 0.8em 1em;
    font-size: 1.1em;
  }
}
</style>